<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #424649;">
  <button class="navbar-toggler" type="button" (click)="navExpanded = !navExpanded" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent" [ngbCollapse]="!navExpanded">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item dropdown" ngbDropdown>
        <a ngbDropdownToggle class="nav-link dropdown-toggle" href="#" id="statusDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Application Status
        </a>
        <div class="dropdown-menu" aria-labelledby="statusDropdown" ngbDropdownMenu>
          <a class="dropdown-item" href="#">Environment: {{applicationData?.environment}}</a>
          <a class="dropdown-item" href="#">App profile: {{applicationData?.appprofile}}</a>
          <a class="dropdown-item" href="#">App version: {{applicationData?.appversion}}</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Grails version: {{applicationData?.grailsversion}}</a>
          <a class="dropdown-item" href="#">Groovy version: {{applicationData?.groovyversion}}</a>
          <a class="dropdown-item" href="#">JVM version: {{applicationData?.jvmversion}}</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Reloading active: {{applicationData?.reloadingagentenabled}}</a>
        </div>
      </li>
      <li class="nav-item dropdown" ngbDropdown>
        <a ngbDropdownToggle class="nav-link dropdown-toggle" href="#" id="artefactsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Artefacts
        </a>
        <div class="dropdown-menu" aria-labelledby="artefactsDropdown" ngbDropdownMenu>
          <a class="dropdown-item" href="#">Controllers: {{applicationData?.artefacts?.controllers}}</a>
          <a class="dropdown-item" href="#">Domains: {{applicationData?.artefacts?.domains}}</a>
          <a class="dropdown-item" href="#">Services: {{applicationData?.artefacts?.services}}</a>
        </div>
      </li>
      <li class="nav-item dropdown" ngbDropdown>
        <a ngbDropdownToggle class="nav-link dropdown-toggle" href="#" id="pluginsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Installed Plugins
        </a>
        <div class="dropdown-menu" aria-labelledby="pluginsDropdown" ngbDropdownMenu>
          <a class="dropdown-item" href="#" *ngFor="let plugin of applicationData?.plugins">{{plugin.name}} - {{plugin.version}}</a>
        </div>
      </li>
    </ul>
    <a class="navbar-brand" href="/#">
      <img src="../../images/grails.svg" />
    </a>
  </div>
</nav>